<template>
  <div class="musicListContainer">
    <div class="musicListCenter">
      <button><i class="iconfont icon-24gf-play">播放全部</i></button>
      <ElTable
        able
        :data="tableData"
        stripe
        style="width: 100%"
        @cell-mouse-enter="handleHover"
        @cell-mouse-leave="isHover = false"
        @cell-click="toAlbum"
      >
        <el-table-column label="序号" width="80">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="music" label="歌曲" width="350" class-name="column" />
        <el-table-column prop="singer" label="歌手" width="280" class-name="column" />
        <el-table-column prop="album" label="专辑" width="300" class-name="column" />
        <el-table-column label="时长" width="190">
          <template #default="scope">
            <div class="icon" v-if="isHover == true && scope.row.id == rowId">
              <i class="iconfont icon-bofang_o"></i>
              <i class="iconfont icon-aixin"></i>
              <i class="iconfont icon-tianjia"></i>
              <i class="iconfont icon-zhuanfa"></i>
            </div>
            <span v-else>{{ scope.row.time }}</span>
          </template>
        </el-table-column>
      </ElTable>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "MusicList",
});
</script>
<script setup lang="ts">
import { ElTable } from "element-plus";
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import moment from "moment";
import request from "../../../utils/request";

const route = useRoute();
const router = useRouter();
// 表格数据
const tableData = ref([]);
//是否移入的状态
const isHover = ref<boolean>(false);
const rowId = ref<number>(0);
//鼠标移入显示按钮的逻辑
const handleHover = (row: any) => {
  isHover.value = true;
  rowId.value = row.id;
};
//传过来的当前页码
const props = defineProps(["currentPage"]);
watch(
  () => {
    return props.currentPage;
  },
  () => {
    request("/artist/songs", {
      id: route.params.id,
      limit: 50,
      offset: (props.currentPage - 1) * 50,
    }).then((result) => {
      tableData.value = result.data.songs.map((item) => ({
        id: item.id,
        music: item.name,
        singer: item.ar[0].name,
        time: item.dt,
        album: item.al.name,
        albumId: item.al.id,
      }));
    });
  }
);
onMounted(() => {
  request("/artist/songs", { id: route.params.id, limit: 50 }).then((result) => {
    tableData.value = result.data.songs.map((item) => ({
      id: item.id,
      music: item.name,
      singer: item.ar[0].name,
      time: moment(item.dt).format("mm:ss"),
      album: item.al.name,
      albumId: item.al.id,
    }));
  });
});
// const toAlbum = (row, column) => {
//   console.log(row, column);
//   if (column.label === "专辑") {
//     router.push({
//     })
//   }
// };
</script>
<style lang="less">
.musicListContainer {
  width: 100%;
  .musicListCenter {
    width: 1200px;
    margin: 0 auto;
    .icon {
      i {
        margin-left: 20px;
        font-size: 20px;
        font-weight: 400;
        cursor: pointer;
      }
    }
    button {
      padding: 12px 31px;
      background-color: #e61723;
      border-radius: 20px;
      margin-bottom: 20px;
      cursor: pointer;
      text-align: center;
      font-weight: 500;
      color: #fff;
      font: 14px;
      border: none;
      &:hover {
        background-color: #eb454f;
      }
    }
  }
}
.column {
  cursor: pointer;
  &:hover {
    color: #eb454f;
  }
}
</style>
